import 'package:flutter/material.dart';
import '../widget/CustomFloatingActionButtonLocation.dart';

class FirstHomePage extends StatefulWidget {
  /// 传入一个标题
  /// @param title 标题
  const FirstHomePage({key, required this.title}) : super(key: key);

  final String title;

  @override
  State<FirstHomePage> createState() => _FirstHomeState();
}

class _FirstHomeState extends State<FirstHomePage> {
  int _count = 0;

  void _addNum() {
    setState(() {
      _count += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          foregroundColor: Colors.white,
          backgroundColor: Theme.of(context).primaryColor,
          // 标题居中
          centerTitle: true,
        ),
        body: Column(
          children: [
            Row(mainAxisAlignment: MainAxisAlignment.center, children: [
              Container(
                alignment: Alignment.center,
                margin:
                    const EdgeInsets.only(left: 10.0, top: 30.0, right: 10.0),
                width: MediaQuery.of(context).size.width * 0.8,
                height: 100.0,
                decoration: BoxDecoration(
                    color: const Color.fromRGBO(0, 120, 212, .6),
                    borderRadius: BorderRadius.circular(10.0),
                    boxShadow: const [
                      BoxShadow(
                          color: Colors.black54,
                          offset: Offset(2.0, 4.0),
                          blurRadius: 4.0)
                    ]),
                child: Text(
                  "点击数: $_count",
                  style: const TextStyle(fontSize: 30.0),
                ),
              ),
            ]),
            Container(
              alignment: Alignment.topCenter,
              margin: const EdgeInsets.only(top: 50.0),
              child: const Text(
                "介绍",
                style: TextStyle(fontSize: 45.0, fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 50.0),
              padding: const EdgeInsets.only(left: 30.0, right: 30.0),
              child: const Text(
                "       这是 flutter 的第1课,如何去练习 Column 、Row 和 Container，"
                "这里还有涉及到一些盒子阴影的相关知识。同时做了一个计数器的小案例。",
                style: TextStyle(fontSize: 18.0),
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 当按下时,就加1
            _addNum();
          },
          tooltip: "+1",
          shape: const CircleBorder(
              side: BorderSide(
                  style: BorderStyle.none
              )
          ),
          backgroundColor: Colors.green,
          child: const Icon(Icons.add),
        ),
        floatingActionButtonLocation: CustomFloatingActionButtonLocation(
            location: FloatingActionButtonLocation.endFloat,
            offsetX: -20.0,
            offsetY: -40.0
        )
    );
  }
}
